  <template>
    <!-- 主页 -->
  <div class="indexContainer">
    <!-- 头部, 粘性布局 -->

    <van-sticky>
      <div class="header">
        
         <div class="logo">
          <img src="@/assets/logo.png" alt="" />
        </div>
        <gotoSearch/>
        <button class="btnLogin" @click="router.push('/login')">登录</button>
      </div>
      <!-- nav导航 -->
      <div class="nav">
        <van-tabs class="navList" v-model:active="active">
          <van-tab class="navItem" @click="active === 0" title="推荐"></van-tab>
          <van-tab
            class="navItem"
            @click="active !== 0"
            v-for="kingKong in kingKongModule.kingKongList"
            :title="kingKong.text"
            onclick="changenav(index)"
          ></van-tab>
        </van-tabs>
        <div class="dropList" @click="changeShow">
          <van-collapse class="dropItem" v-model="activeNames">
            <van-collapse-item name="1"> </van-collapse-item>
          </van-collapse>
        </div>
      </div>
      <div class="channel" v-show="isShow">
        <div class="title">全部频道</div>
        <div class="channelList">
          <van-grid :border="false" :column-num="4">
            <van-grid-item class="channelItem">
              <div
                class="item"
                @click="active = 0"
                :class="{ active: active === 0 }"
              >
                推荐
              </div>
            </van-grid-item>
            <van-grid-item
              class="channelItem"
              v-for="(kingKong, index) in kingKongModule.kingKongList"
              :key="kingKong.text"
            >
              <div
                class="item"
                :class="{ active: active === index + 1 }"
                @click="active = index + 1"
              >
                {{ kingKong.text }}
              </div>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
    </van-sticky>
    <!-- 主体部分 -->
    <div class="main" v-show="active === 0">
      <!-- 轮播 -->
      <van-swipe class="scrollSwiper" autoplay="2000" indicator-color="white">
        <van-swipe-item
          class="swiperItem"
          v-for="focus in focusList"
          :key="focus.id"
        >
          <img class="swiperImg" :src="focus.picUrl" alt="" />
        </van-swipe-item>
      </van-swipe>

      <Main></Main>
    </div>

    <Floor v-show="active !== 0"></Floor>

    <!-- footer底部 -->
    <div class="footer">
      <div class="btns">
        <van-button class="btn" plain>下载APP</van-button>
        <van-button class="btn1" plain>电脑版</van-button>
      </div>
      <div class="addressInfo">
        <span class="address">网易公司版权所有 © 1997-2022</span>
        <span class="Info">食品经营许可证：JY13301080111719</span>
      </div>
    </div>
    <div class="empty"></div>
    <Following />
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from "vue";
export default defineComponent({
  name: "Home",
});
</script>
<script lang="ts" setup>
import { ref, watch } from "vue";
import Main from "@/components/Main/index.vue";
// import Floor from "@/components/Floor/index.vue";
import { useRouter } from "vue-router";

import { useHomeStore } from "@/stores/home";
import { useLivesStore } from "@/stores/live";
import { storeToRefs } from "pinia";
const homeStore = useHomeStore(); //获取仓库
const livesStore = useLivesStore(); //获取仓库
const router = useRouter();

const active = ref(0);

watch(active, () => {
  if (active.value === 0) {
    homeStore.getIndex();
  } else {
    livesStore.getLives();
  }
});

// 点击箭头显示或隐藏频道列表
const isShow = ref(false);
const changeShow = () => {
  isShow.value = !isShow.value;
};
const activeNames = ref(["0"]);
// const activeNames = ref(["0"]);

//  轮播图 focusList
let { focusList, kingKongModule } = storeToRefs(homeStore);
const changenav = (index: number) => {
  console.log(11);
};
</script>

<style lang="less" scoped>
.indexContainer {
  height: 100%;
  background-color: transparent;
  // 头部
  .header {
    width: 100%;
    // box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    align-items: center;
    // padding: 5px;
    background-color: #fff;
    .logo {
      width: 60px;
      height: 20px;
      img {
        width: 60px;
        height: 20px;
      }
    }
    .search {
      width: 220px;
    }
    .btnLogin {
      width: 50px;
      height: 23px;
      color: #dd1a21;
      font-size: 14px;
      border: 1px #dd1a21 solid;
      box-sizing: border-box;
      border-radius: 5px;
    }
  }
  // navList导航
  .nav {
    display: flex;
    height: 47px;
    .navList {
      // width: 100%;
      display: flex;
      align-items: center;
      background-color: #fff;
      overflow: hidden;
    }
    .dropList {
      .dropItem {
        width: 100%;
      }
    }
  }
  .channel {
    background-color: #fff;
    opacity: 0.8;
    .title {
      font-size: 14px;
      padding: 0 15px;
    }
    .channelList {
      height: 156px;
      margin-top: 10px;
      box-sizing: border-box;
      .channelItem {
        position: relative;
        width: 75px;
        height: 50px;
        // border: 1px solid blue;
        .item {
          position: absolute;
          width: 70px;
          height: 25px;
          line-height: 25px;
          font-size: 13px;
          text-align: center;
          border: 1px solid #ccc;
          border-radius: 2px;
          background-color: #fafafa;
          &.active {
            border: 1px solid #dd1a21;
            color: #dd1a21;
          }
        }
      }
    }
  }
  .main {
    // height: calc(100vh - 70px);
    // 轮播图
    .scrollSwiper {
      .swiperItem {
        width: 100%;
        height: 185px;
        .swiperImg {
          width: 100%;
          height: 185px;
        }
      }
    }
  }
  // footer底部
  .footer {
    margin-top: 10px;
    background-color: #414141;
    .btns {
      padding-top: 17px;
      margin-left: 90px;
      .btn {
        color: #fff;
        background-color: #414141;
        width: 86px;
        height: 31px;
        font-size: 12px;
        margin-right: 18px;
      }
      .btn1 {
        color: #fff;
        background-color: #414141;
        width: 86px;
        height: 31px;
        font-size: 12px;
      }
    }
    .addressInfo {
      padding: 20px 0;
      margin-bottom: 20px;
      font-size: 12px;
      color: #999;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
  .empty {
    height: 30px;
  }
}
</style>
